<template>
  <div>
    <div style="background: white;display: flex;flex-direction: column;padding: 15px">
      <span style="color: #455C93;font-size: 17px">整存整取</span>
      <span style="color: #8A8E98;font-size: 14px;margin-left: 2px"> 50元起存,起存时约定存期,一次性存入本金,全部或部分支取本金和利息。</span>
      <span style="color: #455C93;font-size: 17px;margin-top: 5px">计息规则</span>
      <span
        style="color: #8A8E98;font-size: 14px;margin-left: 2px">按照购买当日我行的挂牌公告定期利率计付利息;可提前支取，提前支取部分按支取当日我行活期存款利率计息。</span>
    </div>

    <div style="display: flex;flex-direction: column;margin-top: 10px">
      <div
        style="border-radius: 10px;display: flex;flex-direction: row;margin: 10px 20px;background: white;overflow: hidden"
        v-for="product,index in productList" @click="onProductClick(product)">
        <div style="display: flex;flex-direction: column;flex: 1;text-align: center;padding: 15px;">
          <div style="display: flex;flex-direction: row;text-align: center;margin: auto">
            <span
              style="font-size: 30px;color: #455C93;text-align: center;line-height: 20px">{{product.term[0]}}</span>
            <span
              style="font-size: 16px;color: #455C93;position: relative;bottom: -2px;text-align: center;line-height: 20px">{{product.term.substring(1, product.term.length)}}</span>
          </div>
          <span style="font-size: 13px;margin-top: 3px;color: #888F99">{{product.type}}</span>
        </div>
        <div style="display: flex;text-align: center;flex-direction: column">
          <div
            style="border-radius: 8px;height: 16px;width: 16px;background: #fbf9fe;position: relative;top:-8px"></div>
          <div
            style="width: 0px;height: 42px;border-style:dashed;border-width:.2px;border-color:#EBEBEB;position: relative;top:0px;left: 7px"></div>
          <div
            style="border-radius: 8px;height: 16px;width: 16px;background: #fbf9fe;position: relative;bottom:-8px"></div>
        </div>
        <div style="display: flex;flex-direction: column;flex: 1;text-align: center;text-align: center;padding: 15px;">
          <span style="color: #DC6E57;font-size: 25px;line-height: 25px;">{{product.rate}}</span>
          <span style="font-size: 13px;margin-top: 3px;color: #888F99">年化利率</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        productList: [
          {term: '3个月', type: '整存整取', rate: '1.32%'},
          {term: '6个月', type: '整存整取', rate: '1.56%'},
          {term: '1年', type: '整存整取', rate: '1.80%'},
          {term: '2年', type: '整存整取', rate: '3.12%'},
          {term: '3年', type: '整存整取', rate: '4.15%'},
          {term: '5年', type: '整存整取', rate: '4.875%'}
        ]
      }
    },
    created () {
      this.$store.commit('setTitle', '定期存款')
    },
    methods: {
      onProductClick: function (product) {
        this.$router.push({
          path: '/fixedDepositSiphonInto',
          query: {product: encodeURIComponent(JSON.stringify(product))}
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
